<style lang="scss" scoped>
.model-content {
  .model-content_title {
    font-size: 28upx;
    color: $f303133;
    padding-top: 23upx;
    &--rigth {
      text-align: right;
    }
    &--center {
      text-align: center;
    }
  }
  .model-content_body {
    padding: 32upx;
    color: $f303133;
    word-break: break-all;
    &--rigth {
      text-align: right;
    }
    &--center {
      text-align: center;
    }
  }
  .model-foot {
    display: flex;
    border-top: 2upx solid #f0f2f5;
    .model-foot_bottom {
      flex: 1;
    }
    .model-foot-line {
      width: 2upx;
      background: #f0f2f5;
      z-index: 2;
    }
  }
}
</style>
<template>
  <xjw-popup
    v-model="value"
    width="70%"
    mode="center"
    :height="height"
    @open="open"
    @close="close"
    :duration="duration"
    :is-popup="false"
    :user-style="borderStyle"
  >
    <view class="model-content">
      <view
        class="model-content_title"
        :class="'model-content_title--' + titleMode"
        >{{ title }}
      </view>
      <view
        class="model-content_body"
        :class="'model-content_body--' + textMode"
      >
        <slot></slot>
      </view>
      <view class="model-foot">
        <view class="model-foot_bottom" v-if="defaultButtonOptions.isCance">
          <xjw-button
            @click="close"
            :type="defaultButtonOptions.cancelType"
            :color="defaultButtonOptions.cancelColor"
            >{{ defaultButtonOptions.cancelText }}</xjw-button
          >
        </view>
        <view class="model-foot-line" v-if="isButtonAllisHave"></view>
        <view class="model-foot_bottom" v-if="defaultButtonOptions.isConfirm">
          <xjw-button
            @click="confirm"
            :type="defaultButtonOptions.confirmType"
            :color="defaultButtonOptions.confirmColor"
            >{{ defaultButtonOptions.confirmText }}</xjw-button
          >
        </view>
      </view>
    </view>
  </xjw-popup>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from "vue-property-decorator";
import popMixin from "../xjw-popup/popMixin";
import { TButtonType, TButtonColorType } from "../xjw-button/index.vue";
import { PropType } from "vue";

interface IButtonOptions {
  isConfirm: Boolean;
  isCance: Boolean;
  confirmText: String;
  cancelText: String;
  confirmColor: TButtonColorType;
  cancelColor: TButtonColorType;
  cancelType: TButtonType;
  confirmType: TButtonType;
}

@Component
export default class Index extends Mixins(popMixin) {
  @Prop({ type: Number, default: 7 }) borderRadius;
  @Prop({ type: String, default: "提示" }) title;
  @Prop({ type: String, default: "center" }) titleMode;
  @Prop({ type: String, default: "center" }) textMode;
  @Prop({
    type: Object as PropType<Partial<IButtonOptions>>,
    default: () => {},
  })
  buttonOptions;

  defaultButtonOptions: IButtonOptions = {
    confirmText: "确定",
    cancelText: "取消",
    isConfirm: true,
    isCance: true,
    confirmColor: "base",
    cancelColor: "strong",
    cancelType: "white",
    confirmType: "white",
  };

  get isButtonAllisHave() {
    return (
      this.defaultButtonOptions.isConfirm && this.defaultButtonOptions.isCance
    );
  }

  megerOptions() {
    Object.assign(this.defaultButtonOptions, this.buttonOptions);
  }

  confirm(e) {
    this.$emit("confirm", e);
  }

  created() {
    this.megerOptions();
    const radius = uni.upx2px(this.borderRadius);
    this.borderStyle.borderRadius = ` ${radius}px ${radius}px ${radius}px ${radius}px`;
  }
}
</script>
